<template>
	<view>
		<block v-for="(item,index) in list" :key="index">
			<view class="box" @click="clickItem(item.videourl)">
				<image src="https://img.zzplc.net/stc/girl.jpg" class="box_logo"></image>
				<view class="box_title">{{item.title}}</view>
				<image src="/static/audio.png" class="box_img" v-if="url!=item.videourl"></image>
				<image src="https://img.zzplc.net/stc/play.gif" class="box_img" v-else></image>
			</view>
		</block>
	</view>
</template>

<script>
	var page = 1
	var lastPage = false
	import { requestData } from 'util/request.js'
	const innerAudioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				list: [],
				url: ''
			};
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			let that = this
			
			setTimeout(function () {
				that.list = []
				page = 1
				lastPage = false
				that.request()
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		// 下一页
		onReachBottom(){
			let that = this
			
			if(!lastPage){
				that.request()
			}
		},
		
		onShow(){
			this.list = []
			page = 1
			lastPage = false
			this.request()
		},
		
		onHide(){
			if(innerAudioContext){
				innerAudioContext.pause();
				this.url = ''
			}
		},
		
		methods: {
			clickItem(url){
				if(this.url!=url){
					innerAudioContext.src = url
					innerAudioContext.play()
					this.url = url
					// innerAudioContext.onPlay(() => {
					// 	this.url = url
					// });
				}else{
					innerAudioContext.pause()
					this.url = ''
				}
				
				innerAudioContext.onEnded(() => {
					this.url = ''
				})
			},
			
			// 请求接口
			request(){
				let that = this
				let list = []
				let classifyIndex = that.classifyIndex
				if(that.classifyIndex>1){
					classifyIndex = classifyIndex - 1
				}
				
				let prama = {
					stime: '',
					etime: '',
					pagecurrent: page,
					pagesize: 10,
					ptype: 3,
					zoneid: '',
					ctypeid: '',
					searchstr: '',
				}
				requestData('/fp/photolist',prama).then(res=>{
					if(res.code==20000){
						list = res.data.list
						if(that.list.length){
							that.list = that.list.concat(list)
						}else{
							that.list = list
						}
						if(res.data.lastPage){
							lastPage = true
						}else{
							page++
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	page{
		background: #EAEAEA;
	}
	.box{
		margin-top: 20rpx;
		width: 750rpx;
		height: 175rpx;
		background: #FFFFFF;
		overflow: hidden;
		
		&_logo{
			float: left;
			margin: 30rpx 20rpx 30rpx 30rpx;
			width: 115rpx;
			height: 115rpx;
			border-radius: 12rpx;
			display: block;
		}
		&_title{
			float: left;
			margin-top: 38rpx;
			width: 402rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 34rpx;
			color: #000000;
			overflow: hidden;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		&_img{
			float: right;
			margin-top: 43rpx;
			margin-right: 30rpx;
			width: 90rpx;
			height: 90rpx;
			display: block;
		}
	}
</style>
